<!-- <template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
    />
  </div>
</template>
 
<script>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default {
  components: { Editor, Toolbar },
  setup() {
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();

    // 内容 HTML
    const valueHtml = ref("<p>hello</p>");

    // 模拟 ajax 异步获取内容
    onMounted(() => {
      setTimeout(() => {
        valueHtml.value = "";
      }, 1500);
    });

    const toolbarConfig = {};
    const editorConfig = {
      placeholder: "请",
      MENU_CONF: {
        //   配置上传图片
        uploadImage: {
          server: "",
          fieldName: "file",
          meta: {},
          // 请求头
          headers: { token: localStorage.getItem("token") },
          timeout: 5 * 1000, // 5s 超时时间
          //选择文件时的类型限制，默认为['image/*'] 如不想限制，则设置为 []
          allowedFileTypes: ["image/*"],
          maxFileSize: 30 * 1024 * 1024, //1g //设置大点 不然图片过大会报错
          base64LimitSize: 1000000 * 1024, // 1g 以下插入 base64
          // 自定义插入图片
          customInsert(res, insertFn) {
            // res 即服务端的返回结果
            // console.log(res, "res");
            // 从 res 中找到 url alt href ，然后插图图片
            insertFn(url, alt, href);
          },
        },
        //   配置上传视频
        uploadVideo: {
          server: "",
          fieldName: "file",
          meta: {},
          // 请求头
          headers: { token: localStorage.getItem("token") },
          timeout: 5 * 1000, // 5s 超时时间
          //选择文件时的类型限制，默认为['video/*'] 如不想限制，则设置为 []
          allowedFileTypes: ["video/*"],
          // 自定义插入视频
          customInsert(res, insertFn) {
            insertFn(url, alt, href);
          },
        },
      },
    };

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });

    const handleCreated = (editor) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
    };

    return {
      editorRef,
      valueHtml,
      mode: "default", //默认模式
      mode: "simple", //简洁模式
      toolbarConfig,
      editorConfig,
      handleCreated,
    };
  },
};
</script> -->

<template>
  <div>
    <div class="w-e-for-vue">
      <!-- 工具栏 -->
      <Toolbar
        class="w-e-for-vue-toolbar"
        :editor="editor"
        :defaultConfig="toolbarConfig"
      >
      </Toolbar>

      <!-- 编辑器 -->
      <Editor
        class="w-e-for-vue-editor"
        :style="'height: ' + height"
        :disabled="isDisabled"
        :defaultConfig="editorConfig"
        v-model="content"
        @onChange="onChange"
        @onCreated="onCreated"
      >
      </Editor>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { DomEditor } from "@wangeditor/editor";

export default {
  name: "wangEditor",
  components: { Editor, Toolbar },
  props: ["editorParams"],
  data() {
    return {
      // 富文本编辑器对象
      editor: null,
      // 富文本内容
      content: null,
      // 富文本占位内容
      placeholder: null,
      // 富文本上传图片的地址
      uploadImageUrl: "https://api-qingchuang.xmw1688.com/common/upload",
      // 富文本最小高度
      height: "300px",
      // 富文本是否禁用
      isDisabled: false,
      // 工具栏配置
      toolbarConfig: {
        // 显示指定的菜单项
        // toolbarKeys: [],
        // 隐藏指定的菜单项
        excludeKeys: [
          // 隐藏全屏按钮
          "fullScreen",
        ],
      },
      // 编辑器配置
      editorConfig: {
        placeholder: "请输入内容......",
        MENU_CONF: ["uploadImage"],
      },
    };
  },
  watch: {
    /**
     * 深度监听富文本参数
     */
    editorParams: {
      handler: function (newVal, oldVal) {
        if (newVal != null) {
          this.content = newVal.content;
          this.editorConfig.placeholder = this.placeholder;
          this.uploadImageUrl =
            "https://api-qingchuang.xmw1688.com/common/upload";
          this.setUploadImageConfig();
          this.height = newVal.height;
          this.isDisabled = newVal.isDisabled;
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /**
     * 实例化富文本编辑器
     */
    onCreated(editor) {
      this.editor = Object.seal(editor);
      this.setIsDisabled();
    },
    /**
     * 监听富文本编辑器
     */
    onChange(editor) {
      // console.log('onChange =>', editor.getHtml())
    },
    /**
     * this.editor.getConfig().spellcheck = false
     * 由于在配置中关闭拼写检查，值虽然设置成功，但是依然显示红色波浪线
     * 因此在富文本编辑器组件挂载完成后，操作 Dom 元素设置拼写检查 spellcheck 为假
     */
    async setSpellCheckFasle() {
      let doms = await document.getElementsByClassName("w-e-scroll");
      for (let vo of doms) {
        if (vo) {
          if (vo.children.length > 0) {
            vo.children[0].setAttribute("spellcheck", "false");
          }
        }
      }
    },
    /**
     * 设置富文本是否禁用
     */
    async setIsDisabled() {
      if (this.editor) {
        this.isDisabled ? this.editor.disable() : this.editor.enable();
      }
    },
    /**
     * 上传图片配置
     */
    setUploadImageConfig() {
      this.editorConfig.placeholder = this.placeholder;
      this.editorConfig.MENU_CONF["uploadImage"] = {
        fieldName: "file", // 文件字段名（后端需要对应的字段）， 默认值 'wangeditor-uploaded-image'
        maxFileSize: 6 * 1024 * 1024, // 单个文件的最大体积限制，默认为 2M，此次设置为 6M
        maxNumberOfFiles: 30, // 最多可上传几个文件，默认为 100
        allowedFileTypes: ["image/*"], // 选择文件时的类型限制，默认为 ['image/*'] ，若不想限制，则设置为 []
        metaWithUrl: false, // 将 meta 拼接到 URL 参数中，默认 false
        server: this.uploadImageUrl, // 上传图片接口地址
        withCredentials: false, // 跨域是否传递 cookie ，默认为 false
        timeout: 5 * 1000, // 超时时间，默认为 10 秒，此次设置为 5 秒
        // 自定义插入图片
        customInsert(res, insertFn) {
          // let file_url = "";

          // let obj = {
          //   errno: 0, // 0 表示成功
          //   data: [res.resultData], // 图片链接数组
          // };

          insertFn(res.resultData);
        },
        // 上传之前触发
        onBeforeUpload(file) {
          return file;
        },
        // 上传进度的回调函数
        onProgress(progress) {
          console.log("progress", progress);
        },
        // 单个文件上传成功之后
        onSuccess(file, res) {
          console.log(`${file.name} 上传成功`, res);
        },
        // 单个文件上传失败
        onFailed(file, res) {
          console.log(`${file.name} 上传失败`, res);
        },
        // 上传错误，或者触发 timeout 超时
        onError(file, err, res) {
          console.log(`${file.name} 上传出错`, err, res);
        },
      };
    },
    /**
     * 获取编辑器文本内容
     */
    getEditorText() {
      const editor = this.editor;
      if (editor != null) {
        return editor.getText();
      }
    },
    /**
     * 获取编辑器Html内容
     */
    getEditorHtml() {
      const editor = this.editor;
      // 下方三行用来获取编辑器工具栏分组
      // const toolbar = DomEditor.getToolbar(this.editor)
      // const curToolbarConfig = toolbar.getConfig()
      // console.log( curToolbarConfig.toolbarKeys )
      if (editor != null) {
        return editor.getHtml();
      }
    },
    /**
     * 填充编辑器Html内容
     */
    setEditorHtml(html) {
      const editor = this.editor;
      if (editor != null) {
        editor.setHtml(html);
      }
    },
  },
  created() {},
  mounted() {
    this.setSpellCheckFasle(); // 设置拼写检查 spellcheck 为假
    document.activeElement.blur(); // 取消富文本自动聚焦且禁止虚拟键盘弹出
  },
  /**
   * 销毁富文本编辑器
   */
  beforeDestroy() {
    const editor = this.editor;
    if (editor != null) {
      editor.destroy();
    }
  },
};
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="less" scoped>
.w-e-full-screen-container {
  z-index: 99;
}

.w-e-for-vue {
  margin: 0;
  border: 1px solid #ccc;

  .w-e-for-vue-toolbar {
    border-bottom: 1px solid #ccc;
  }

  .w-e-for-vue-editor {
    height: auto;

    /deep/ .w-e-text-container {
      .w-e-text-placeholder {
        top: 6px;
        color: #666;
      }

      pre {
        code {
          text-shadow: unset;
        }
      }

      p {
        margin: 5px 0;
        font-size: 14px; // 设置编辑器的默认字体大小为14px
      }
    }
  }
}
</style>

